<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>表单排版 | 表单</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_icon.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_input.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_input_number.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_input_file.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_input_group.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_checkbox.css?20180418">
	<link rel="stylesheet" href="../../assets/dest/css/form_select.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_button.css?20180426">
	<link rel="stylesheet" href="../../assets/dest/css/form_button_group.css?20180427">
	<link rel="stylesheet" href="../../assets/dest/css/form_switch.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_typography.css">
	<link rel="stylesheet" href="../../assets/dest/css/notice_tooltip.css">
	<link rel="stylesheet" href="../../assets/dest/css/util_atom.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
	<style>
		form {width: 420px; padding: 0 20px; margin: 20px auto; border: 1px solid #ddd;}
		.o-form-label {width: 5em;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>表单排版</dd>
			<dt>描述：</dt>
			<dd>组织表单内的元素，布局排版</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>form_typography.css</code>
			</dd>
			<dt>可搭配资源（不限于）：</dt>
			<dd>
				<code>form_input.css</code>
				<code>form_input_number.css</code>
				<code>form_input_file.css</code>
				<code>form_input_group.css</code>
				<code>form_checkbox.css</code>
				<code>form_select.css</code>
				<code>form_button.css</code>
				<code>form_button_group.css</code>
				<code>form_switch.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<form onsubmit="return false">
			<button class="u-mt10" onclick="changeView()">切换表单显示方式</button>
			<div class="l-form-group">
				<span class="o-form-label form-label-lg">电站名称</span>
				<div class="l-form-item">
					<input class="o-input input-lg" type="text" placeholder="支持中、英文，数字">
					<p class="o-form-tip">为电站起个好听的名字是成功的一半</p>
				</div>
			</div>
			<div class="l-form-group">
				<span class="o-form-label">电站类型</span>
				<div class="l-form-item">
					<label class="o-checkbox">
						<input type="checkbox" name="checkbox">
						<span class="o-label-text">工业级大型发电站</span>
					</label>
					<label class="o-checkbox">
						<input type="checkbox" name="checkbox">
						<span class="o-label-text">小型商业电站</span>
					</label>
					<label class="o-checkbox">
						<input type="checkbox" name="checkbox">
						<span class="o-label-text">民用屋顶光伏电站</span>
					</label>
				</div>
			</div>
			<div class="l-form-group">
				<span class="o-form-label">安装地点</span>
				<div class="l-form-item">
					<select class="o-select">
						<option>国内</option>
						<option>国外</option>
					</select>
				</div>
			</div>
			<div class="l-form-group">
				<span class="o-form-label">经纬度</span>
				<div class="l-form-item">
					<div class="c-input-group">
						<input class="o-input" type="text" placeholder="请点击打开地图确定经纬度坐标">
						<div class="c-btn-group">
							<span class="o-btn o-btn-normal" onclick="alert('别点了，没地图')">
								<i class="icon-map-pin"></i>
								<span>地图选点</span>
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="l-form-group">
				<span class="o-form-label">电站容量</span>
				<div class="l-form-item">
					<label class="c-input-number nocontrols" data-unit="kWp">
						<input class="o-input" id="capacity" type="text">
					</label>
				</div>
			</div>
			<div class="l-form-group">
				<span class="o-form-label">电价</span>
				<div class="l-form-item">
					<div class="c-input-group">
						<span class="o-input-addon u-txt-left" style="width:115px">
							<label class="o-radio">
								<input type="radio" name="radio" checked>
								<span class="o-label-text">国家统一电价</span>
							</label>
						</span>
						<input class="o-input" type="text" value="0.54" readonly>
					</div>
					<div class="c-input-group u-mt10">
						<span class="o-input-addon u-txt-left" style="width:115px">
							<label class="o-radio">
								<input type="radio" name="radio">
								<span class="o-label-text">地方电价</span>
							</label>
						</span>
						<input class="o-input" type="text">
					</div>
				</div>
			</div>
			<div class="l-form-group">
				<span class="o-form-label">电站照片</span>
				<div class="l-form-item">
					<span class="c-input-group">
						<input type="text" class="o-input" placeholder="当前没有文件" readonly>
						<label class="c-btn-group">
							<input type="file" class="o-input-file" accept="image/png, image/jpg" onchange="getUpfileUrl(this)">
							<span class="o-btn o-btn-normal">浏览...</span>
						</label>
					</span>
				</div>
			</div>
			<div class="l-form-group">
				<span class="o-form-label">电站简介</span>
				<div class="l-form-item">
					<textarea rows="5" class="o-input" placeholder="说点啥吧"></textarea>
				</div>
			</div>
			<div class="l-form-group form-inline" id="share">
				<div class="o-form-label">
					<span class="o-tooltip" data-tooltip="公开的电站会被其他用户看到">
						公开电站
					</span>
				</div>
				<div class="l-form-item">
					<label class="o-switch">
						<input type="checkbox">
						<span class="o-switch-base"></span>
					</label>
				</div>
			</div>
			<div class="l-form-group u-txt-center">
				<button class="o-btn o-btn-normal" type="reset">取消</button>
				<button class="o-btn o-btn-primary" type="submit">保存</button>
			</div>
		</form>
	</div>
    <script src="../../dist/js/libs/jquery-1.11.3.min.js"></script>
	<script src="../../assets/dest/js/jquery.inputNumber.js"></script>
	<script>
		$('#capacity').inputNumber();

		function getUpfileUrl(elm) {
			elm.parentNode.parentNode.querySelector('input.o-input').value = elm.value
		}

		var formGroups = $('.l-form-group').not('#share');

		function changeView() {
			formGroups.toggleClass('form-inline');
		}
	</script>
</body>
</html>
